<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    >
    <title>用户体系</title>
    <!-- head 中 -->
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/axios.min.js"></script>
    <style type="text/css">
        body {
            margin: 10px;
        }

        .userTable {
            width: 100%;
            height: calc(100vh - 50px);
            display: flex;
            align-items: center;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="userTable" >
            <el-table :data="list" border style="width: 100%">
                <el-table-column prop="groupName" label="柜组" width='120' ></el-table-column>
                <el-table-column prop="address" label="地址"  width='240' ></el-table-column>

                <el-table-column label="商品信息">
                    <!-- 分行显示 -->
                    <template slot-scope="scope">
                        <el-table border :data='scope.row.goodsList' >
                            <el-table-column prop='name' label="名称"></el-table-column>
                            <el-table-column prop='num' label="数量"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column prop="goodsCount" label="商品总数" width='140'></el-table-column>
                <el-table-column fixed="right" align="center" width="230" label="操作">
                    <el-button  type="primary" size="small">打包</el-button>
                    <el-button  type="primary" size="small">打印</el-button>
                </el-table-column>
            </el-table>


    </div>

</div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                options:[],
                list: [
                    {
                        groupName: '1店',
                        address:"上海市浦东新区XXXXXXXX二楼一楼",
                        goodsList:[
                            {
                                name:'青椒鸡蛋炒饭',
                                num:'3'
                            },
                            {
                                name:'鱼香肉丝盖浇饭',
                                num:'2'
                            },
                            {
                                name:'干锅土豆片盖浇饭',
                                num:'5'
                            }
                        ],
                        goodsCount:'10'
                    },
                    {
                        groupName: '2柜',
                        address:"上海市浦东新区XXXXXXXX二楼",
                        goodsList:[
                            {
                                name:'青椒鸡蛋炒饭',
                                num:'3'
                            },
                            {
                                name:'鱼香肉丝盖浇饭',
                                num:'2'
                            },
                            {
                                name:'干锅土豆片盖浇饭',
                                num:'5'
                            }
                        ],
                        goodsCount:'10'
                    }
                ]
            }
        },
        methods: {
            openResult(){
                axios.get('records').then(res => {
                    if (res.data.length>0) {
                        window.location.href = 'result?initScore='+res.data[res.data.length - 1];
                    }else{
                        this.$message.success("图表生成中.....,请稍后再试")
                    }
                }).catch (err=>{
                    this.$message.error(err.message)
                })
            }
        }
    })
</script>
</html>
